Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

(function(){
    var util = Ext.ns('app.util'), view = Ext.ns('app.view');
    
    Ext.apply(util, {
        ui4js: function(cls, uid, jss, callback, scope){
            jss = Ext.isString(jss) ? [jss] : jss;
            Ext.Loader.load(jss, function(){
                var ui, cb = callback, o = Ext.ns(cls);
                if (o && o.init) {
                    ui = o.init(uid);
                }
                cb ? cb.call(this, ui) : '';
            }, scope);
        },
        uiCreate: function(o, callback, scope){
            var cls = o.cls, uid = o.uid, jss = o.jss, cb = callback;
            if (!cls || !uid || !jss) {
                return;
            }
            var ui = Ext.getCmp(uid);
            if (ui) {
                cb ? cb.call(scope || winodw, ui) : '';
            }
            else {
                util.ui4js(cls, uid, jss, function(ui){
                    cb ? cb.call(scope || winodw, ui) : '';
                }, scope);
            }
        }
    });
    
    view.init = function(){
        var treePanel = new Ext.tree.TreePanel({
            width: 180,
            region: 'west',
            rootVisible: false,
            margins: '5, 0, 5, 5',
            root: {},
            loadMask: true,
            collapsible: true,
            header: false,
            autoScroll: true,
            animCollapse: false,
            animate: false,
            collapseMode: 'mini',
            split: true,
            loader: {
                url: 'data/data-menu-tree.json'
            },
            tbar: {
                xtype: 'toolbar',
                items: [{
                    xtype: 'button',
                    icon: 'images/expand-all.gif'
                }, '-', {
                    xtype: 'button',
                    icon: 'images/collapse-all.gif'
                }, '->', {
                    xtype: 'button',
                    icon: 'extjs/resources/images/default/layout/collapse.gif',
                    handler: function(){
						treePanel.collapse();
                    }
                }]
            },
            listeners: {
                load: function(n){
                    n.expand(true, false);
                },
                click: function(n){
                    app.util.uiCreate(n.attributes, function(ui){
                        var cmp = this.get(ui);
                        if (cmp) {
                            this.activate(ui);
                        }
                        else {
                            this.add(ui);
                            this.activate(ui);
                        }
                    }, tabPanel);
                }
            }
        });
        var tabPanel = new Ext.TabPanel({
            activeTab: 0,
            region: 'center',
            margins: '5, 5, 5, 0',
            items: [{
                xtype: 'panel',
                title: '主页'
            }]
        });
        var view = new Ext.Viewport({
            layout: 'border',
            items: [{
                xtype: 'box',
                region: 'north',
                height: 40,
                border: false,
                style: 'background: url(images/hd-bg.gif) repeat-x 0 0;'
            }, treePanel, tabPanel]
        });
        return {
            tree: treePanel,
            tab: tabPanel,
            view: view
        }
    }
})();

Ext.onReady(function(){
    app.view.init();
});
